<template>
  <div class="home-container fadeIn">
    <div class='home-content'>
      <div class='account'>
        <span>账单查询</span>
      </div>
      <!-- <div>
        <div id="myChart" :style="{width: '100%', height: '300px'}"></div>
      </div> -->

      <div class="condition">
        <el-form ref="form" :inline="true" :model="form" class="demo-form-inline">
          <el-form-item label="账单状态">
            <el-select v-model="form.billStatus" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-button type="primary" @click="onSubmit">查询</el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="tableList">
        <el-table
          :data="tableData"
          style="width: 100%"
          :default-sort = "{prop: 'date', order: 'descending'}"
          >
          <el-table-column
            prop="username"
            label="用户名"
            >
          </el-table-column>
          <el-table-column
            prop="bankName"
            label="收款银行名称">
          </el-table-column>
          <el-table-column
            prop="bankCardNo"
            label="收款账号"
            >
          </el-table-column>
          <el-table-column
            prop="bankCardName"
            label="收款姓名"
            >
          </el-table-column>
          <el-table-column
            prop="sdate"
            label="开始结算时间"
            >
          </el-table-column>
          <el-table-column
            prop="edate"
            label="结束结算时间"
            >
          </el-table-column>
          <el-table-column
            prop="pay"
            label="支出（未扣税）"
            >
          </el-table-column>
          <el-table-column
            prop="taxesPay"
            label="税费"
            >
          </el-table-column>
          <el-table-column
            prop="bonus"
            label="奖金金额"
            >
          </el-table-column>
          <el-table-column
            prop="payTime"
            label="付款时间"
            >
          </el-table-column>
          <el-table-column
            label="状态">
            <template slot-scope="scope">
              <label>{{scope.row.appbillStatusType===0?'未打款':scope.row.billStatus===1?'已打款':'已拒绝'}}</label>
            </template>
          </el-table-column>
          <el-table-column
            prop="remark"
            label="备注"
            >
          </el-table-column>
        </el-table>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState, mapActions } from 'vuex';
import { queryString } from '@/utils';

export default {
  name: 'HomeData',
  data() {
    return {
      form: {
        billStatus: '',
      },
      tableData: [],
      options: [{
        value: '0',
        label: '未打款',
      }, {
        value: '1',
        label: '已打款',
      }, {
        value: '2',
        label: '已拒绝',
      }],
    };
  },
  computed: {
    ...mapState('homeData', [
      'dataList',
    ]),
  },
  mounted() {
    this.setDataList().then(() => {
      this.tableData = this.dataList.dataes;
    });
  },
  components: {
  },
  methods: {
    ...mapActions('homeData', [
      'setDataList',
    ]),
    onSubmit() {
      const data = {
        billStatus: this.form.billStatus,
        userId: this.$getLS('userId'),
      };
      this.setDataList(queryString(data)).then(() => {
        this.tableData = this.dataList.dataes;
      });
    },

  },
};
</script>
<style media="screen">
.echarts {
height: 300px;
}
</style>
<style lang='scss' src='@/scss/pages/home_index.scss'/>
